<app-header> </app-header>

<ng-container>
  @let status = dataService.reportStatus$ | async;
  @let hasCiphers = dataService.hasCiphers$ | async;
  @let isGeneratingReport = dataService.isGeneratingReport$ | async;
  @if (status == ReportStatusEnum.Initializing || hasCiphers === null) {
    <!-- Show page loading state when initializing risk insights (quick page load) -->
    <dirt-page-loading></dirt-page-loading>
  } @else {
    <!-- Check final states after initial calls have been completed -->
    @if (isRiskInsightsActivityTabFeatureEnabled && !(dataService.hasReportData$ | async)) {
      <!-- Show empty state only when feature flag is enabled and there's no report data -->
      <div @fadeIn class="tw-flex tw-justify-center tw-items-center tw-min-h-[70vh] tw-w-full">
        @if (!hasCiphers) {
          <!-- Show Empty state when there are no applications (no ciphers to make reports on) -->
          <empty-state-card
            [videoSrc]="emptyStateVideoSrc"
            [title]="this.i18nService.t('noDataInOrgTitle')"
            [description]="this.i18nService.t('noDataInOrgDescription')"
            [benefits]="emptyStateBenefits"
            [buttonText]="this.i18nService.t('importData')"
            [buttonIcon]="IMPORT_ICON"
            [buttonAction]="this.goToImportPage"
          ></empty-state-card>
        } @else {
          <!-- Show empty state for no reports run -->
          <empty-state-card
            [videoSrc]="emptyStateVideoSrc"
            [title]="this.i18nService.t('noReportsRunTitle')"
            [description]="this.i18nService.t('noReportsRunDescription')"
            [benefits]="emptyStateBenefits"
            [buttonText]="this.i18nService.t('riskInsightsRunReport')"
            [buttonIcon]=""
            [buttonAction]="this.generateReport.bind(this)"
          ></empty-state-card>
        }
      </div>
    } @else {
      <!-- Show screen when there is report data OR when feature flag is disabled (show tabs even without data) -->
      <div @fadeIn class="tw-min-h-screen tw-flex tw-flex-col">
        <div>
          <div class="tw-text-main tw-max-w-4xl tw-mb-2" *ngIf="appsCount > 0">
            {{ "reviewAtRiskPasswords" | i18n }}
          </div>
          @let isRunningReport = dataService.isGeneratingReport$ | async;
          <div
            class="tw-bg-primary-100 tw-rounded-lg tw-w-full tw-px-8 tw-py-4 tw-my-4 tw-flex tw-items-center"
          >
            <i
              class="bwi bwi-exclamation-triangle bwi-lg tw-text-[1.2rem] tw-text-muted"
              aria-hidden="true"
            ></i>
            @if (dataLastUpdated) {
              <span class="tw-mx-4">{{
                "dataLastUpdated" | i18n: (dataLastUpdated | date: "MMMM d, y 'at' h:mm a")
              }}</span>
            }
            <span class="tw-flex tw-justify-center">
              <button
                *ngIf="!isRunningReport"
                type="button"
                bitButton
                buttonType="secondary"
                class="tw-border-none !tw-font-normal tw-cursor-pointer !tw-py-0"
                tabindex="0"
                [bitAction]="generateReport.bind(this)"
              >
                {{ "riskInsightsRunReport" | i18n }}
              </button>
              <span>
                <i
                  *ngIf="isRunningReport"
                  class="bwi bwi-spinner bwi-spin tw-text-muted tw-text-[1.2rem]"
                  aria-hidden="true"
                ></i>
              </span>
            </span>
          </div>
        </div>

        @if (status == ReportStatusEnum.Loading && isGeneratingReport) {
          <!-- Show detailed progress when generating report (longer operation) -->
          <dirt-risk-insights-loading></dirt-risk-insights-loading>
        } @else {
          <div class="tw-flex-1 tw-flex tw-flex-col">
            <bit-tab-group [(selectedIndex)]="tabIndex" (selectedIndexChange)="onTabChange($event)">
              @if (isRiskInsightsActivityTabFeatureEnabled) {
                <bit-tab label="{{ 'activity' | i18n }}">
                  <dirt-all-activity [organizationId]="this.organizationId"></dirt-all-activity>
                </bit-tab>
              }
              <bit-tab label="{{ 'allApplicationsWithCount' | i18n: appsCount }}">
                <dirt-all-applications></dirt-all-applications>
              </bit-tab>
              <bit-tab>
                <ng-template bitTabLabel>
                  <i class="bwi bwi-star"></i>
                  {{
                    "criticalApplicationsWithCount"
                      | i18n: (dataService.criticalReportResults$ | async)?.reportData?.length ?? 0
                  }}
                </ng-template>
                <dirt-critical-applications></dirt-critical-applications>
              </bit-tab>
            </bit-tab-group>
          </div>
        }
      </div>
    }
  }
</ng-container>
